<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的第一个网页</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
      }
      .container {
        background: rgba(255, 255, 255, 0.1);
        padding: 30px;
        border-radius: 15px;
        backdrop-filter: blur(10px);
        text-align: center;
      }
      h1 {
        font-size: 2.5em;
        margin-bottom: 20px;
      }
      .feature {
        margin: 15px 0;
        padding: 10px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>🚀 欢迎来到前端开发世界</h1>
      <p>这是我使用VS Code创建的第一个网页！</p>

      <div class="feature">
        <h3>✨ VS Code的优势</h3>
        <p>智能代码补全、语法高亮、插件丰富</p>
      </div>

      <div class="feature">
        <h3>🛠️ 开发环境</h3>
        <p>一站式解决方案，提升开发效率</p>
      </div>

      <div class="feature">
        <h3>🎯 学习目标</h3>
        <p>掌握现代前端开发技能</p>
      </div>
    </div>

    <script>
      // 添加一些交互效果
      document.addEventListener('DOMContentLoaded', function () {
        const features = document.querySelectorAll('.feature')
        features.forEach((feature, index) => {
          setTimeout(() => {
            feature.style.transform = 'translateY(0)'
            feature.style.opacity = '1'
          }, index * 200)
        })
      })

      // 初始化动画状态
      document.querySelectorAll('.feature').forEach(feature => {
        feature.style.transform = 'translateY(20px)'
        feature.style.opacity = '0'
        feature.style.transition = 'all 0.5s ease'
      })
    </script>
  </body>
</html>
